// home主要目的 做了 tabBar 栏

import React from 'react'
import { Route } from 'react-router-dom'

// 导入路由组件
import Index from './index/index'
import List from './list/index'
import Nwes from './news/index'
import User from './user/index'

// 引入 tabBar
import { TabBar } from 'antd-mobile'

// tabBar 的数据进行循环的
const tabBar = [
  { title: '首页', icon: 'icon-home', router: '/home' },
  { title: '找房', icon: 'icon-search', router: '/home/list' },
  { title: '资讯', icon: 'icon-books', router: '/home/news' },
  { title: '我的', icon: 'icon-user', router: '/home/user' }
]

// 组件
export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: '/home'
    }
  }

  // tabBar 的渲染函数
  tabBarList = () => {
    return tabBar.map(x => {
      return (
        <TabBar.Item
          // title 是名称
          title={x.title}
          // 循环的值
          key={x.title}
          // icon 图标
          icon={<i className={x.icon}></i>}
          // 选中的图标
          selectedIcon={<i className={x.icon}></i>}
          // 当前选中项   以路由为选中
          selected={this.state.selectedTab === x.router}
          // 点击触发的函数  可以做 导航跳转
          onPress={() => {
            this.setState({
              selectedTab: x.router
            })
            console.log(this.props.history.push(x.router))
          }}
        ></TabBar.Item>
      )
    })
  }

  // 渲染ui
  render(h) {
    return (
      <div>
        {/* // 路由 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/list" component={List}></Route>
        <Route path="/home/news" component={Nwes}></Route>
        <Route path="/home/user" component={User}></Route>

        {/* // tabBar 栏 */}
        <div
          style={{
            position: 'fixed',
            width: '100%',
            bottom: 0
          }}
        >
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            noRenderContent
          >
            {this.tabBarList()}
          </TabBar>
        </div>
      </div>
    )
  }
}
